import { SVG } from "@libs/svg.js-3.2.0/build/svg.esm.js";

// 需要加载的图片资源
const imageResources = [
    {
        father: "#container20_front",
        replaced: "#container20_front_replaced",
        url: "/container20.png",
        svgdotjs_image: undefined,
    },
    {
        father: "#container20_behind",
        replaced: "#container20_behind_replaced",
        url: "/container20.png",
        svgdotjs_image: undefined,
    },
    {
        father: "#container40",
        replaced: "#container40_replaced",
        url: "/container4045.png",
        svgdotjs_image: undefined,
    },
];

export const initializeIGVSVGPack = async (domElement: HTMLElement, svgRawContent: string) => {

    return new Promise((resolve, reject) => {
        const draw = SVG().addTo(domElement);
        draw.svg(svgRawContent);

        let loadedImages = 0;
        for (let i = 0; i < imageResources.length; i++) {
            const imageResourcesObject = imageResources[i];
            imageResourcesObject.svgdotjs_image = draw.image(imageResourcesObject.url).on("load", () => {
                const fatherS = draw.find(imageResourcesObject.father)[0];
                const replacedS = draw.find(imageResourcesObject.replaced)[0];
                // console.log(replacedS, replacedS.x(), replacedS.y());
                imageResourcesObject.svgdotjs_image.addTo(fatherS);
                imageResourcesObject.svgdotjs_image.move(replacedS.x(), replacedS.y());
                replacedS.remove();

                loadedImages += 1;
                if (loadedImages === imageResources.length) {
                    onImagesLoaded();
                }
            });
        }

        const onImagesLoaded = () => {

            // 岸桥轨道车
            const container1 = draw.find("#container20_front")[0];
            const container2 = draw.find("#container20_behind")[0];
            const container3 = draw.find("#container40")[0];
            const containerDoor1 = draw.find("#containerDoor1")[0];
            const containerDoor2 = draw.find("#containerDoor2")[0];
            const containerDoor3 = draw.find("#containerDoor3")[0];
            const containerDoor4 = draw.find("#containerDoor4")[0];

            const containers = [container1, container2, container3];
            const containerDoors = [containerDoor1, containerDoor2, containerDoor3, containerDoor4];

            const hideAllContainer = () => {
                container1.hide();
                container2.hide();
                container3.hide();
            }

            const setContainerMode = (mode: "Single20_Front" | "Single20_Behind" | "Double20" | "40" | "45" | "") => {
                hideAllContainer();
                if (!mode && mode != "") throw new Error("IGV SVG throw an Error: invalid mode when calling setContainerMode(mode)");
                else if (mode == "Single20_Front") {
                    container2.show();
                }
                else if (mode == "Single20_Behind") {
                    container1.show();
                }
                else if (mode == "Double20") {
                    container1.show();
                    container2.show();
                }
                else if (mode == "40") {
                    container3.show();
                }
                else if (mode == "45") {
                    container3.show();
                }
            }

            const setContainerByStatus = (statusArr: boolean[] & { length: 3 }) => {
                for (let i = 0; i < statusArr.length; i++) {
                    const element = statusArr[i];
                    if (element) containers[i].show();
                    else containers[i].hide();
                }
            }

            const setContainerDoorByStatus = (statusArr: boolean[] & { length: 4 }) => {
                for (let i = 0; i < statusArr.length; i++) {
                    const element = statusArr[i];
                    if (element) containerDoors[i].show();
                    else containerDoors[i].hide();
                }
            }


            /** 复位 */
            const resetStatus = () => {
                setContainerMode("");
            }

            resolve({
                draw,
                setContainerMode,
                resetStatus,
                setContainerByStatus,
                setContainerDoorByStatus
            });
        }
    })

}